<template>
  <div class="unsettled">
    <!-- <van-empty description="暂无推广" /> -->
    <!-- <van-sticky offset-top="4rem" class="my-sticky"> -->
    <!-- <div class="abstract">
        <div><div >每日</div></div>
        <div><div >每月</div></div>
        <div><div>每年</div></div>
    </div> -->

    <!-- <div @click="show = true" class="date">其他时间 </div> -->

    <div>
      <van-list
        v-model:loading="loading"
        :finished="finished"
        @load="onLoad(false)"
        :key="index"
      >
        <div v-if="!groupList.length && finished && !loading">
          <!-- <van-empty
            class="custom-image"
            image="http://www.higuang365.com/public/images/poster/zanwu.png"
          /> -->
          <img
            class="custom-image"
            src="http://www.higuang365.com/public/images/poster/zanwu.png"
          />
          <!-- image="https://img.yzcdn.cn/vant/custom-empty-image.png" -->
        </div>
        <div v-else class="foods">
          <div v-for="(item, key) in groupList" :key="key">
          <div class="datetitle">{{ item.date.substr(0,10) }}</div>

          <div class="circle">
            <a
              class="food"
              v-for="(value, index) in item.List"
              :key="index"
              :href="
                'http://www.higuang365.com/wap/#/product?id='+value.product_id+'&parents_id='+$store.state.userInfo.F_Question
              "
            >
              <!-- <router-link
                class="food"
                v-for="(value, index) in list"
                :key="index"
                :to="
                  '/product/' +
                  value.product_id +
                  '/' +
                  $store.state.userInfo.F_Question
                "
              > -->
              <div class="img">
                <img :src="'http://higuang365.com/' + value.settlement_id" />
              </div>
              <div class="info">
                <div class="name">{{ value.productname }}</div>
                <div class="foodinfos">
                  <div class="foodinfo">
                    <div class="font">付款金额</div>
                    <div>￥{{ value.totalprice }}</div>
                  </div>
                  <div class="foodinfo">
                    <div class="font">我的奖励</div>
                    <div>￥{{ value.gentsprice }}</div>
                  </div>
                  <div class="foodinfo">
                    <div class="font">购买数量</div>
                    <div>{{ value.nums }}</div>
                  </div>
                </div>
                <!-- <div class="createtime">{{ value.createtime }} </div> -->
              </div>
              <!-- </router-link> -->
            </a>
          </div>
          </div>
        </div>
      </van-list>
    </div>
    <!-- </van-sticky> -->
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { Get_MemberSettlementList } from "@/api/profit";
import { useStore } from "vuex";
export default {
  setup() {
    const data = reactive({
      list: [],
      groupList: [],
      loading: false,
      finished: false,
      Refresh: false,
      show: false,
      active: 1,
      status: 1,
      pageNum: 1,
      pageSize: 20,
    });
    const store = useStore();
    const onLoad = async () => {
      let fromdata = {
        timeday: "",
        strmemberid: store.state.userInfo.F_UserId, //店主推广ID
        // B_member_ok_time: store.state.userInfo.F_AllowStartTime, //店主资格审批完成时间
        pageNum: data.pageNum,
        pageSize: data.pageSize,
      };

      const res = await Get_MemberSettlementList(fromdata);
      data.loading = false;
      if (!res[0] || !res[1].length) {
        data.finished = true;
        return true;
      }
      data.list.push(...res[1]);

      let dataArr = [];
      data.list.map((mapItem) => {
        if (dataArr.length == 0) {
          dataArr.push({ date: mapItem.createtime, List: [mapItem] });
        } else {
          let res = dataArr.some((item) => {
            //判断相同的部门，有就添加到当前项
            if (item.date == mapItem.createtime) {
              item.List.push(mapItem);
              return true;
            }
          });
          if (!res) {
            //如果没找相同的部门添加一个新对象
            dataArr.push({ date: mapItem.createtime, List: [mapItem] });
          }
        }
      });
      console.log(dataArr);
      data.groupList = dataArr;

      if (res[1].length < data.pageSize) {
        data.finished = true;
      }
      data.pageNum += 1;
    };
    return {
      ...toRefs(data),
      onLoad,
    };
  },
};
</script>
<style lang="scss" scoped>
.unsettled {
  // padding: 0 1rem;
  min-height: calc(100vh - 4rem);
  font-size: 1.3rem;
  background: #fff;
  .custom-image {
    width: 12rem;
    margin-top: 10rem;
  }
  .my-sticky {
    color: #fff;
  }
  .abstract {
    display: flex;
    justify-content: space-around;
    padding: 1rem;
  }
  .date {
    padding: 1rem;
  }
  .foods {
      padding-top: 1rem;
    .datetitle {
      padding: 1rem;
      margin: 0 1rem;
          font-weight: 600;
      background: #f7f7f7;
    }
    .circle,
    .person {
      margin-top: 1rem;
      padding-bottom: 1rem;
      background: #fff;
    }
    .food {
      display: flex;
      margin-bottom: 1.5rem;
      background: #f2f2f2;
      padding: 1rem;
      margin: 1rem;
      border-radius: 1rem;
      overflow: hidden;
      .img {
        width: 10rem;
        min-width: 10rem;
        border-radius: 1rem;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .info {
        margin-left: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .name {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .createtime {
          color: #aaa;
          text-align: left;
          padding-left: 2rem;
        }
        .foodinfos {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  .font {
    color: #aaa;
    padding: 0.5rem;
  }
}
</style>